import React from 'react';
import { connect } from 'dva';
import { List, ListView, Modal, Button, Icon } from 'antd-mobile';
import moment from 'moment';
import styles from './BranchSelectModal.less';
import classnames from 'classnames';

const Item = List.Item;

class BranchSelectModal extends React.Component {


  constructor(props) {
    super(props);
    this.state = {
      visiable: false
    };
  }

  handleTelClick = (e, tel) => {
    window.location.href = "tel:" + tel;
    e.preventdefault();
  }

  render() {
    const { visiable, dataSource } = this.props;
    const thiz = this;

    const myData = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });

    console.log("------------------------------------------")
    console.log("------------------------------------------")
    console.log("------------------------------------------")
    console.log(dataSource);

    return (
      <div>
      <div className={classnames({
        [styles["bg-model"]]: true,
        [styles["show"]]:!visiable
      })}
      onClick={() => {thiz.props.onCancel()}}
      ></div>

      <div className={classnames({
        [styles["container"]]: true,
        [styles["show"]]:!visiable
      })}>
        <div className={styles["title"]}>
        选择服务门店
        <div className={styles["close-icon"]} onClick={() => {thiz.props.onCancel()}}>
          <Icon type="cross" size="lg"/>
        </div>
        </div>

        <div className={styles["item-container"]}>
          {dataSource.map((branch) => {
            return (
            <div className={styles["item"]} onClick={() => thiz.props.onOk(branch)}>
              <h5 className={styles["item-title"]}>{branch.branch_name} </h5>
              <span className={styles["item-desc"]}>{branch.address}</span>
              {branch.qez_tel && 
              <a className={styles["phone-icon"]} href={"tel:" + branch.qez_tel}><img src={require("../../assets/phone_icon.png")} /></a>
              }
            </div>)
          })}
        </div>
      </div>
      
      </div>
    );
  }
}

export default connect(({ }) => ({ }))(BranchSelectModal);
